<template>
  <!-- 门店排名查询 -->
  <el-container>
    <el-main style="min-width: 1300px;padding:0 10px">
      <el-form :model="pagination" :rules="rules" ref="pagination" label-width="100px">
        <el-row :gutter="10">
          <el-col :span="4" :offset="0">
            <el-form-item label="门店">
              <el-input v-model="searchParam.orgName" style="width:240%;" />
              <!-- <el-select
                v-model="pagination.orgName"
                multiple
                filterable
                remote
                reserve-keyword
                placeholder="默认查全部,下拉查分公司数据"
                :remote-method="getOrgInfo"
                style="width:240%;"
                :loading="loading"
              >
                <el-option
                  v-for="item in options"
                  :key="item.code"
                  :label="item.name"
                  :value="item.code"
                ></el-option>
              </el-select>-->
            </el-form-item>
          </el-col>
          <el-col :span="6" :offset="2">
            <el-form-item>
              <el-button @click="getPageChange()" type="primary" size="medium">查询</el-button>
              <el-button @click="resetForm('pagination')" type="primary" size="medium">重置</el-button>
              <el-button type="primary" size="medium" @click="exportBillExcel">导出</el-button>
            </el-form-item>
          </el-col>
          <el-col :span="6" :offset="2">
            <el-form-item>
              <el-upload class="upload-demo" drag :action="uploadUrl()" name="uploadFile" :multiple="false">
                <i class="el-icon-upload"></i>
                <div class="el-upload__text">
                  将文件拖到此处，或
                  <em>点击上传</em>
                </div>
                <div class="el-upload__tip" slot="tip">可以上传 澳洲肥牛, 龙虾, 鱼翅燕窝</div>
              </el-upload>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <hr />
      <el-table
        ref="multipleTable"
        tooltip-effect="dark"
        highlight-current-row
        stripe
        border
        style="width: 100%;margin-top: 5px"
        :data="tableData.list"
        height="85%"
      >
        <el-table-column type="index" label="序号" width="50" align="center"></el-table-column>
        <el-table-column label="操作" width="100" align="center">
          <template slot-scope="scope">
            <el-button @click="handleClick(scope.row)" type="text" size="small">查看</el-button>
          </template>
        </el-table-column>
        <el-table-column prop="orgCode" label="门店编码" align="center"></el-table-column>
        <el-table-column prop="orgName" label="门店名称" width="120" align="center"></el-table-column>
        <el-table-column prop="rankNo" label="排名" width="120" align="center"></el-table-column>
        <el-table-column prop="diffValue" label="与上一名差值" width="120" align="center"></el-table-column>
        <el-table-column prop="businessValue" label="营业额" width="120" align="center"></el-table-column>
        <el-table-column prop="yMonth" label="月份" width="120" align="center"></el-table-column>
        <el-table-column prop="id" label="id" v-if="false" align="center"></el-table-column>
      </el-table>
      <div class="block" align="center">
        <!-- 亲测:current-page等没卵用,无法双向绑定,只能设个初始值 -->
        <el-pagination
          :page-sizes="pagination.pageSizes"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="pagination.pageNum"
          :page-size="pagination.pageSize"
          :total="tableData.total"
          layout="total, sizes, prev, pager, next, jumper"
        ></el-pagination>
      </div>
    </el-main>
  </el-container>
</template>

<script>
import { getPage } from "./env/service";
import { baseUrl } from "./env/env";
export default {
  name: "storeRankingList",
  data() {
    return {
      loading: false,
      options: [],
      // 分页插件
      pagination: {
        orgCodes: "",
        key: [],
        pageNum: 1,
        pageSize: 10,
        pageSizes: [10, 50, 200]
      },
      // 校验规则
      rules: {
        orgCodes: [{ required: true, message: "输入名称查询", trigger: "blur" }]
      },
      // 列表数据
      tableData: {
        list: [],
        total: 0
      },
      searchParam: {
        //orgCodes: '',
        orgName: "",
        key: "",
        pageNum: 1,
        pageSize: 10
      }
    };
  },
  methods: {
    // 获取上传url
    uploadUrl() {
      return baseUrl+ "/v1/sunData/uploadBlackCat";
    },
    // 导出excel
    exportBillExcel() {
      alert("亲爱的媳妇,该功能尚未开发");
    },
    //重置
    resetForm(formName) {
      this.$refs[formName].resetFields();
      this.$set(this.searchParam, "orgName", "");
    },
    // 查看详情
    handleClick() {
      alert("亲爱的媳妇,该功能尚未开发");
    },
    //分页
    handleSizeChange(val) {
      this.pagination.pageSize = val;
      this.getPageChange();
    },
    handleCurrentChange(val) {
      this.pagination.pageNum = val;
      this.getPageChange();
    },
    // 网店列表,匹配code & name
    getOrgInfo(query) {
      //TODO luance
    },

    //分页查询
    getPageChange() {
      // TODO 查询按钮时把页数赋值为1
      let _this = this;
      this.$set(_this.searchParam, "pageNum", _this.pagination.pageNum);
      this.$set(_this.searchParam, "pageSize", _this.pagination.pageSize);
      console.log(" handle search ......");
      console.log(_this.searchParam);
      getPage(this.searchParam, "门店排名查询", function(res) {
        if (res.status == "SUCCESS") {
          _this.tableData.total = res.data.total;
          _this.tableData.list = res.data.list;
        } else {
          _this.$message.error(res.message);
        }
      });
      // _this.$message.error("查询状态有误!");
    }
  },
  created() {
    this.getPageChange();
  },
  head() {
    return {
      title: "门店排名查询"
    };
  }
};
</script>

<style>
.fontLabel {
  height: 30px;
  line-height: 20px;
  font-size: 16px;
  font-family: MicrosoftYaHei-Bold;
  font-weight: bold;
  color: rgba(51, 51, 51, 1);
}
.el-select__tags {
  max-height: 58px;
  overflow: auto;
}
</style>

